<script setup>
import {ref, onMounted} from 'vue';
import {ElMessage, ElMessageBox} from 'element-plus';
import {useUserManageStore} from '@/stores/admin/userManage';

const userManageStore = useUserManageStore();
const multipleTableRef = ref();
const formRef = ref()


onMounted(() => {
  getList();
});

const getList = () => {
  userManageStore.getList();
};

const handleSizeChange = (size) => {
  userManageStore.setPageSize(size);
  getList();
};

const handleCurrentChange = (page) => {
  userManageStore.setPageNum(page);
  getList();
};

const resetQuery = () => {
  userManageStore.resetQuery();
  getList();
};

const openEditDialog = (row) => {
  userManageStore.openEditDialog(row);
};

const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      userManageStore.submitForm().then(() => {
      })
    } else {
      ElMessage.error('请填写正确的表单信息')
      return false
    }
  })
};

const handleDelete = (row) => {
  ElMessageBox.confirm('确定删除该用户吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
      .then(() => {
        console.log('确认删除'); // 添加调试语句
        userManageStore.handleDelete(row);
      })
      .catch(() => {
        console.log('取消删除'); // 添加调试语句
      });
};

const handleSelectionChange = (selection) => {
  userManageStore.setMultipleSelection(selection);
};

const handleBatchDelete = () => {
  ElMessageBox.confirm('确定批量删除选中的用户吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
      .then(() => {
        userManageStore.handleBatchDelete();
        multipleTableRef.value.clearSelection();
      })
      .catch(() => {
      });
};
</script>

<template>
  <div class="user-manage">
    <el-row style="margin-bottom: 10px">
      <el-col :span="24">
        <el-button type="primary" @click="userManageStore.openCreateDialog">新增用户</el-button>
        <el-button
            type="danger"
            @click="handleBatchDelete"
            :disabled="userManageStore.multipleSelection.length === 0"
            style="margin-left: 10px"
        >
          批量删除
        </el-button>
      </el-col>
    </el-row>
    <el-row style="margin-bottom: 20px;margin-top: 20px">
      <el-col :span="3">
        <el-input
            v-model="userManageStore.queryParams.username"
            placeholder="请输入用户名"
            clearable
        />
      </el-col>
      <el-col :span="3" :offset="1">
        <el-input
            v-model="userManageStore.queryParams.name"
            placeholder="请输入姓名"
            clearable
        />
      </el-col>
      <el-col :span="3" :offset="1">
        <el-select
            v-model="userManageStore.queryParams.role"
            placeholder="请选择权限"
            clearable
        >
          <el-option label="实验员" value="1"/>
          <el-option label="管理员" value="2"/>
        </el-select>
      </el-col>
      <el-col :span="3" :offset="1">
        <el-button type="primary" @click="getList">查询</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-col>
    </el-row>

    <el-table
        ref="multipleTableRef"
        :data="userManageStore.userList"
        style="width: 100%;text-align: center"
        @selection-change="handleSelectionChange"
        border
    >
      <el-table-column type="selection" align="center"/>
      <el-table-column prop="id" label="用户ID" align="center"/>
      <el-table-column prop="username" label="用户名" align="center"/>
      <el-table-column prop="name" label="姓名" align="center"/>
      <el-table-column prop="phone" label="手机号" align="center"/>
      <el-table-column prop="email" label="邮箱" align="center"/>
      <el-table-column prop="role" label="权限" align="center">
        <template #default="scope">
          {{ scope.row.role === 1 ? '实验员' : '管理员' }}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center"/>
      <el-table-column prop="updateTime" label="更新时间" align="center"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button size="small" type="primary" @click="openEditDialog(scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin-top: 16px; display: flex; justify-content: flex-end">
      <el-pagination
          :current-page="userManageStore.queryParams.pageNum"
          :page-size="userManageStore.queryParams.pageSize"
          :total="userManageStore.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          style="margin: 0 auto"
      />
    </div>
    <el-dialog :title="userManageStore.dialogTitle" v-model="userManageStore.dialogVisible" width="500px">
      <el-form ref="formRef" :model="userManageStore.form" label-width="80px">
        <el-form-item label="用户名" prop="username"
                      :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
          <el-input v-model="userManageStore.form.username"/>
        </el-form-item>
        <el-form-item label="密码" prop="password"
                      :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
          <el-input v-model="userManageStore.form.password" type="password" show-password/>
        </el-form-item>
        <el-form-item label="姓名" prop="name" :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
          <el-input v-model="userManageStore.form.name"/>
        </el-form-item>
        <el-form-item label="手机号" prop="phone"
                      :rules="[{ required: true, message: '请输入手机号', trigger: 'blur' }]">
          <el-input v-model="userManageStore.form.phone"/>
        </el-form-item>
        <el-form-item label="邮箱" prop="email" :rules="[{ message: '请输入邮箱', trigger: 'blur' }]">
          <el-input v-model="userManageStore.form.email"/>
        </el-form-item>
        <el-form-item label="权限" prop="role" :rules="[{ required: true, message: '请选择权限', trigger: 'change' }]">
          <el-select v-model="userManageStore.form.role" placeholder="请选择权限">
            <el-option label="实验员" value="1"/>
            <el-option label="管理员" value="2"/>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="userManageStore.dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitForm">确定</el-button>
                </span>
      </template>
    </el-dialog>
  </div>
</template>

<style>
.user-manage {
  padding: 20px;
}
</style>